/*
 * @Author: your name
 * @Date: 2021-12-23 22:54:32
 * @LastEditTime: 2021-12-24 12:19:47
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \json-serveg:\桌面2\50htmljs\random\script.js
 */
const textarea = document.getElementById('textarea')
const tagEl = document.getElementById('tags')

textarea.addEventListener('keyup',(e)=>{
    // console.log(e.target.value)
    createTags(e.target.value)

    if (e.key === 'Enter') {
        setTimeout(() => {
            e.target.value = ''
        }, 10);

        randomSelect()

    }
})
//生成标签
function createTags(input){
    const tags = input.split(',').map(tag=>tag.trim()).filter(tag=>tag)
    tagEl.innerHTML = ''
    tags.forEach(item => {
        const tagDom = document.createElement('span')
        tagDom.classList.add('tag')
        tagDom.innerText = item
        tagEl.appendChild(tagDom)
    });

}

//生成随机的html标签
function pickRandomTag(){
    const tags = document.querySelectorAll('.tag')
    return tags[Math.floor(Math.random() *  tags.length)]
}

// console.log(pickRandomTag())

// function set(){
//     setTimeout(()=>{
//         console.log(pickRandomTag())
//     },9000)
// }
// set()
//选中随机的标签
function randomSelect(){
    
    setTimeout(() => {
            // 随机的标签
    const randomTag = pickRandomTag()

    highlightTag(randomTag)    
    }, 1000);
  

}



//随机高亮的标签
function highlightTag(tag){
    tag.classList.add('highlight')
}








